<template>
  <div class="header">
    <span class="back" @click="$router.back()">
      <i class="iconfont icon-zuojiantou"></i>
    </span>
    <span class="novel_name">{{ title || "详情" }}</span>
    <span class="todo" @click="showShare = true"> <i class="iconfont icon-fenxiang_2"></i> </span>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  props: ["title"],
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style lang="less">
// 顶部
.header {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  transition: all 1s;
  background-color: #52b594;
  span {
    flex: 0 0 40px;
    display: block;
    text-align: center;
    i {
      font-size: 18px;
      color: #fff;
    }
  }
  .novel_name {
    flex: 1;
    font-size: 14px;
    color: #fff;
  }
}
</style>